<template>
  <div>
    <ul>
      <li v-for="ml in messageList" :key="ml.id">
<!--       路由传参 to的字符串写法-->
<!--        <router-link :to="`/home/message/detail?id:${ml.id}&title:${ml.title}`">{{ml.title}}</router-link>&nbsp;&nbsp;-->
<!--    路由传参  to的对象写法 -->
        <router-link :to="{
        name:'detail',
        query:{
          id:ml.id,
          title:ml.title
        },
        params:{
          id:ml.id,
          title:ml.title
        }
        }">
          {{ml.title}}
        </router-link>
        <button @click="pushShow(ml)">push查看</button>
        <button @click="replaceShow(ml)">replace查看</button>
      </li>
    </ul><hr>
<router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "Message",
  data(){
    return{
      messageList:[
        {id:'001',title:'消息1'},
        {id:'002',title:'消息2'},
        {id:'003',title:'消息3'}
      ]
    }
  },
  methods:{
    pushShow(ml){
      this.$router.push({
        name:'detail',
        query:{
          id:ml.id,
          title:ml.title
        },
        params:{
          id:ml.id,
          title:ml.title
        }
      })
    },
    replaceShow(ml){
      this.$router.replace({
        name:'detail',
        query:{
          id:ml.id,
          title:ml.title
        },
        params:{
          id:ml.id,
          title:ml.title
        }
      })
    }
  }
}
</script>

<style scoped>

</style>